<!--终端管理-->
<template>
  <div id="terminalManege">
    <el-row>
      <el-form :model="searchItem" ref="searchItem" label-width="auto" class="searchForm">
        <el-col :span="4">
          <el-form-item label="终端ID" prop="deviceId">
            <el-input size="small" v-model="searchItem.deviceId" placeholder="终端ID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="name" label="终端名称">
            <el-input size="small" v-model="searchItem.name" placeholder="设备名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="deviceType" label="终端类型">
            <el-select size="small" v-model="searchItem.deviceType" :placeholder="typeArr.title">
              <el-option
                v-for="item in typeArr.options"
                :key="item.deviceType"
                :label="item.name"
                :value="item.deviceType"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="status" label="终端状态">
            <el-select size="small" v-model="searchItem.status" :placeholder="statusArr.title">
              <el-option
                v-for="item in statusArr.options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="search(1)"
            style="background-color: #11a7b8;"
          >查询</el-button>
          <el-button type="default" size="small" @click="reset('searchItem')">重置</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            :data="tableData"
            border
            size="medium"
            class="terminalTable"
            :header-cell-style="tableHeaderColor"
          >
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column prop="deviceId" label="终端ID" align="center" width="170">
              <template slot-scope="scope">
                <el-button
                  @click="detailRow(scope.row)"
                  type="text"
                  size="medium"
                >{{scope.row.deviceId}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="终端名称" width="205" align="center"></el-table-column>
            <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
            <el-table-column prop="version" label="终端版本" align="center"></el-table-column>
            <el-table-column prop="status" label="终端状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status===0" style="color:orange">未激活</span>
                <span v-if="scope.row.status===1" style="color:#67c23a">正常</span>
              </template>
            </el-table-column>
            <el-table-column prop="registerTime" label="激活时间" align="center" width="150"></el-table-column>
            <el-table-column prop="ip" label="终端ip" align="center"></el-table-column>
            <el-table-column prop="mac" label="mac地址" align="center" width="135"></el-table-column>
            <el-table-column prop="options" label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button @click="editRow(scope.row)" type="text" size="medium" title="编辑">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button @click="delRow(scope.row)" type="text" size="medium" title="删除">
                  <i class="el-icon-delete"></i>
                </el-button>
                <!-- <el-button @click="restart(scope.row)" type="text" size="medium">重启</el-button>
                <el-button @click="maintenance(scope.row)" type="text" size="medium">进入维护状态</el-button>
                <el-button @click="pairRow(scope.row)" type="text" size="medium">对时</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin:20px 0px">
            <el-col :span="4">
              <!-- <el-button type="success" size="small" icon="el-icon-refresh" @click="search(1,10)">刷新</el-button> -->
              <el-button
                type="success"
                size="small"
                icon="el-icon-plus"
                @click="add('dialogForm')"
                style="float:left"
              >新增</el-button>
              <el-upload
                ref="upload"
                action="/"
                :show-file-list="false"
                :on-change="importExcel"
                :auto-upload="false"
              >
                <el-button slot="trigger" icon="el-icon-upload" size="small" plain>批量导入</el-button>
              </el-upload>
            </el-col>
            <el-col :span="20">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10,15]"
                :page-size="tableLimit"
                layout="total, sizes, prev, pager, next"
                :total="tableSize"
                style="float: right"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :before-close="handleDialogClose"
      @close="initProps"
      width="75%"
    >
      <!-- 终端form -->
      <el-row v-show="!ifAddContainer">
        <el-form
          :model="dialogForm"
          :rules="dialogRules"
          ref="dialogForm"
          label-width="120px"
          class="acForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="终端ID" prop="deviceId">
                <span v-if="ifDialogDetail||ifDialogEdit">{{dialogForm.deviceId}}</span>
                <el-input
                  v-if="!ifDialogDetail&&!ifDialogEdit"
                  v-model="dialogForm.deviceId"
                  placeholder="请输入终端ID"
                  style="width:80%;float:left"
                ></el-input>
                <el-button
                  plain
                  size="mini"
                  v-if="ifDialogDetail"
                  style="float:right;margin:5px;"
                  @click="maintenance(dialogForm)"
                >进入维护状态</el-button>
                <el-button
                  plain
                  size="mini"
                  v-if="ifDialogDetail"
                  style="float:right;margin:5px;"
                  @click="restart(dialogForm)"
                >重启</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终端名称" prop="name">
                <span v-if="ifDialogDetail">{{dialogForm.name}}</span>
                <el-input v-if="!ifDialogDetail" v-model="dialogForm.name" placeholder="请输入终端名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row></el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备类型" prop="deviceType">
                <span v-if="ifDialogDetail">{{dialogForm.deviceType}}</span>
                <el-select
                  v-if="!ifDialogDetail"
                  v-model="dialogForm.deviceType"
                  :placeholder="typeArr.title"
                  style="float:left"
                >
                  <el-option
                    v-for="item in typeArr.options"
                    :key="item.deviceType"
                    :label="item.name"
                    :value="item.deviceType"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="ifDialogDetail">
              <el-form-item label="终端版本">
                <span>{{dialogForm.version}}</span>
                <!-- <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="float:right;margin:5px;"
                  @click="updateRow(dialogForm)"
                >升级</el-button>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="制造商">
                <span v-if="ifDialogDetail||ifDialogEdit">{{dialogForm.vendor}}</span>
                <el-input
                  v-if="!ifDialogDetail&&!ifDialogEdit"
                  v-model="dialogForm.vendor"
                  placeholder="请输入制造商"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="ifDialogEdit||ifDialogDetail">
            <el-col :span="12">
              <el-form-item label="终端状态" prop="status">
                <!-- 详情状态 -->
                <span v-if="dialogForm.status===0">未激活</span>
                <span v-if="dialogForm.status===1">正常</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="ifDialogDetail">
              <el-form-item label="终端时间">
                <span style="float:left;">{{dialogForm.terminalTime}}</span>
                <el-button
                  plain
                  size="mini"
                  style="float:left;margin:5px;"
                  @click="getTerminalTime(dialogForm)"
                >获取终端时间</el-button>
                <el-button
                  plain
                  size="mini"
                  style="float:left;margin:5px;"
                  @click="pairRow(dialogForm)"
                >对时</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="终端ip">
                <span v-if="ifDialogDetail||ifDialogEdit">{{dialogForm.ip}}</span>
                <el-input
                  v-if="!ifDialogDetail&&!ifDialogEdit"
                  v-model="dialogForm.ip"
                  placeholder="请输入终端ip"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="mac地址">
                <span v-if="ifDialogDetail||ifDialogEdit">{{dialogForm.mac}}</span>
                <el-input
                  v-if="!ifDialogDetail&&!ifDialogEdit"
                  v-model="dialogForm.mac"
                  placeholder="请输入mac地址"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备经度">
                <span v-if="ifDialogDetail">{{dialogForm.gisLon}}</span>
                <el-input v-if="!ifDialogDetail" v-model="dialogForm.gisLon" placeholder="请输入设备经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备纬度">
                <span v-if="ifDialogDetail">{{dialogForm.gisLat}}</span>
                <el-input v-if="!ifDialogDetail" v-model="dialogForm.gisLat" placeholder="请输入设备纬度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="height:100px">
              <el-form-item label="描述信息" class="lineHeight">
                <span v-if="ifDialogDetail">{{dialogForm.description}}</span>
                <el-input
                  v-if="!ifDialogDetail"
                  v-model="dialogForm.description"
                  type="textarea"
                  style="height:100px"
                  placeholder="请输入描述信息"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div
            v-if="(dialogForm.status===1&&ifDialogEdit)||(ifDialogDetail&&dialogForm.containerArr.length>0)"
            style="padding: 10px 0px;overflow: auto;"
          >
            <el-row>
              <el-col :span="24" style="height:auto;width:auto;white-space: nowrap;border: none;">
                <!-- 容器&应用 -->
                <div class="rongqibox" v-for="(item,index) in dialogForm.containerArr" :key="index">
                  <div class="rq-title">
                    <span class="layui-bg-blue">
                      <i class="el-icon-set-up"></i>
                    </span> 容器
                  </div>
                  <ul>
                    <li>
                      <i class="el-icon-d-arrow-right"></i>
                      {{item.name}}
                    </li>
                    <li>
                      <i class="el-icon-d-arrow-right"></i>
                      {{item.containerName}}
                      <el-button
                        v-if="dialogForm.status===1&&ifDialogEdit"
                        type="text"
                        size="mini"
                        icon="el-icon-delete"
                        @click="uninstallContainer(item)"
                        title="卸载"
                        style="color:red"
                      ></el-button>
                    </li>
                  </ul>
                  <hr />
                  <div class="rq-title">
                    <span class="layui-bg-orange">
                      <i class="el-icon-menu"></i>
                    </span> 应用
                  </div>
                  <ul>
                    <li v-for="(app,appIndex) in item.appList" :key="appIndex">
                      <i class="el-icon-d-arrow-right"></i>
                      {{app.appName}}
                      <el-button
                        v-if="dialogForm.status===1&&ifDialogEdit"
                        type="text"
                        size="mini"
                        icon="el-icon-delete"
                        @click="uninstallApp(item,app)"
                        title="卸载"
                        style="color:red"
                      ></el-button>
                    </li>
                    <li v-if="dialogForm.status===1&&ifDialogEdit">
                      <el-button
                        style="margin: 0px 45%;"
                        type="text"
                        title="添加应用"
                        icon="el-icon-plus"
                        @click="chooseFile('app',item.name)"
                      ></el-button>
                    </li>
                  </ul>
                </div>
                <div v-if="dialogForm.status===1&&ifDialogEdit" class="rongqibox">
                  <div class="rq-title">
                    <span class="layui-bg-blue">
                      <i class="el-icon-set-up"></i>
                    </span> 容器
                  </div>
                  <ul>
                    <li>
                      <div style="text-align: center;">
                        <el-button
                          circle
                          icon="el-icon-plus"
                          title="添加容器"
                          @click="chooseFile('container')"
                        ></el-button>
                      </div>
                    </li>
                  </ul>
                </div>
                <!--  -->
                <!-- <el-form-item label="容器" class="container" style="height:65px;">
                  <el-row type="flex">
                    <div
                      class="el-col addConfig"
                      v-for="(item,index) in dialogForm.containerArr"
                      :key="index"
                    >
                      <img
                        src="../assets/img/container.png"
                        height="45"
                        width="45"
                        style="float:left;margin:10px"
                      />
                      <div class="title" style="float:left;margin:5%">
                        <h4>{{item.name}}</h4>
                        <h4>{{item.containerName}}</h4>
                      </div>
                      <el-button
                        v-if="dialogForm.status===1&&ifDialogEdit"
                        plain
                        circle
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        @click="uninstallContainer(item)"
                      ></el-button>
                    </div>
                    <div
                      v-if="dialogForm.status===1&&ifDialogEdit"
                      class="el-col addConfig"
                      style="height:65px;"
                    >
                      <el-button
                        round
                        size="mini"
                        icon="el-icon-plus"
                        @click="chooseFile('container')"
                        style="margin: 5% 0px;"
                      ></el-button>
                    </div>
                  </el-row>
                </el-form-item>-->
              </el-col>
            </el-row>
            <!-- <el-row v-if="dialogForm.containerArr!==undefined&&dialogForm.containerArr.length>0">
              <el-col :span="24" style="height:auto;width:auto">
                <el-form-item label="应用" class="application" style="height:200px;">
                  <el-row type="flex">
                    <div
                      class="el-col addConfig"
                      style="height:200px;overflow:auto"
                      v-for="(item,index) in dialogForm.containerArr"
                      :key="index"
                    >
                      <div
                        style="float:left;width:100%;display: table-cell;"
                        v-for="(app,appIndex) in item.appList"
                        :key="appIndex"
                      >
                        <img
                          src="../assets/img/application.png"
                          height="20"
                          width="20"
                          style="margin:5px 10px;vertical-align: middle;"
                        />
                        <span
                          style="margin-top:5px;font-size:normal;vertical-align: middle;"
                        >{{app.appName}}</span>
                        <el-button
                          v-if="dialogForm.status===1&&ifDialogEdit"
                          plain
                          circle
                          type="danger"
                          size="mini"
                          icon="el-icon-delete"
                          @click="uninstallApp(item,app)"
                        ></el-button>
                      </div>
                      <div v-if="dialogForm.status===1&&ifDialogEdit">
                        <el-button
                          style="padding:5px"
                          round
                          size="mini"
                          icon="el-icon-plus"
                          @click="chooseFile('app',item.name)"
                        ></el-button>
                      </div>
                    </div>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>-->
          </div>
        </el-form>
      </el-row>
      <!-- 新增服务/容器dialog -->
      <el-row v-show="ifAddContainer">
        <el-col :span="17">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-divider direction="vertical"></el-divider>
              <span>{{addTitle}}</span>
            </div>
            <div>
              <el-container>
                <el-aside width="150px">
                  <el-row>
                    <el-menu
                      class="el-menu-vertical-demo"
                      @open="handleOpen"
                      @close="handleClose"
                      @select="typeSelect"
                    >
                      <!-- 容器分类 -->
                      <div v-if="addTitle.indexOf('容器')!=-1">
                        <div v-for="(item , index) in addDialogTypes" :key="index">
                          <el-menu-item v-if="!item.child" :index="item.itemCode">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item.itemName}}</span>
                          </el-menu-item>
                          <el-submenu v-if="item.child" :index="item.itemCode">
                            <template slot="title">
                              <i class="el-icon-location"></i>
                              <span>{{item.itemName}}</span>
                            </template>
                            <el-menu-item
                              v-for="(child,ind) in item.child"
                              :key="ind"
                              :index="child.itemCode"
                            >{{child.itemName}}</el-menu-item>
                          </el-submenu>
                        </div>
                      </div>
                      <!-- 应用分类 -->
                      <div v-if="addTitle.indexOf('容器')==-1">
                        <div v-for="(item , index) in addDialogTypes" :key="index">
                          <!-- addTitle -->
                          <el-menu-item v-if="!item.child" :index="item.ItemCode">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item.ItemName}}</span>
                          </el-menu-item>
                          <el-submenu v-if="item.child" :index="item.ItemCode">
                            <template slot="title">
                              <i class="el-icon-location"></i>
                              <span>{{item.ItemName}}</span>
                            </template>
                            <el-menu-item
                              v-for="(child,ind) in item.child"
                              :key="ind"
                              :index="child.ItemCode"
                            >{{child.ItemName}}</el-menu-item>
                          </el-submenu>
                        </div>
                      </div>
                    </el-menu>
                  </el-row>
                </el-aside>
                <el-container>
                  <el-header>
                    <el-row>
                      <el-col :span="16">
                        <el-input v-model="searchFileItem" size="small" placeholder="请输入名称进行查询"></el-input>
                      </el-col>
                      <el-col :span="2" :offset="1">
                        <el-button
                          type="primary"
                          size="small"
                          icon="el-icon-search"
                          @click="searchFile()"
                        >搜索</el-button>
                      </el-col>
                    </el-row>
                  </el-header>
                  <el-main :style="{'padding':'0px'}">
                    <!-- 文件服务/容器循环 -->
                    <el-row style="max-height: 300px;overflow:auto;">
                      <el-table
                        ref="fileTable"
                        :data="fileList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @select="rowChange"
                        @select-all="selecteAll"
                        :header-cell-style="tableHeaderColor"
                      >
                        <el-table-column type="selection"></el-table-column>
                        <!-- 容器column -->
                        <el-table-column v-if="addTitle!=='应用库'" prop="name" label="名称"></el-table-column>
                        <el-table-column v-if="addTitle!=='应用库'" prop="type" label="类型"></el-table-column>
                        <!-- 应用库column -->
                        <el-table-column v-if="addTitle==='应用库'" prop="appName" label="名称"></el-table-column>
                        <el-table-column v-if="addTitle==='应用库'" prop="appType" label="类型"></el-table-column>
                        <el-table-column v-if="addTitle==='应用库'" prop="version" label="版本"></el-table-column>

                        <el-table-column prop="vendor" label="开发商"></el-table-column>
                      </el-table>
                    </el-row>
                    <el-row style="text-align: center;margin-top:10px;">
                      <el-pagination
                        ref="deviceTable"
                        @size-change="fileSizeChange"
                        @current-change="fileCurrentChange"
                        :current-page="fileCurrentPage"
                        :page-sizes="[5, 10, 15]"
                        :page-size="filePageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="fileTotal"
                      ></el-pagination>
                    </el-row>
                  </el-main>
                </el-container>
              </el-container>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-divider direction="vertical"></el-divider>
              <span>{{addSelectTitle}}</span>
            </div>
            <div style="max-height:300px;overflow: auto;">
              <!-- 已选容器 -->
              <ul v-if="addTitle!=='应用库'">
                <li v-for="(item,index) in fileSelectedList" :key="index">
                  <i class="el-icon-d-arrow-right"></i>{{item.name}}
                  <el-button type="text" @click="removeSelected(item)">
                    <i class="el-icon-close"></i>
                  </el-button>
                </li>
              </ul>
              <!-- 已选应用 -->
              <ul v-if="addTitle==='应用库'">
                <li v-for="(item,index) in fileSelectedList" :key="index">
                  <i class="el-icon-d-arrow-right"></i>{{item.appName}}
                  <el-button type="text" @click="removeSelected(item)">
                    <i class="el-icon-close"></i>
                  </el-button>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-show="!ifAddContainer&&(!ifDialogDetail||ifDialogEdit)"
          type="primary"
          @click="submitForm('dialogForm')"
        >保 存</el-button>
        <el-button
          v-show="!ifDialogDetail&&!ifDialogDetail&&!ifAddContainer"
          @click="dialogFormVisible = false"
        >取 消</el-button>
        <el-button v-show="ifAddContainer" type="primary" @click="submitFile()">安 装</el-button>
        <el-button v-show="ifAddContainer" @click="ifAddContainer = false,dialogTitle='编辑终端'">取 消</el-button>
        <el-button v-show="ifDialogDetail" @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 文件预览dialog  -->
    <el-dialog title="文件预览" :visible.sync="excelShow" width="75%">
      <div class="previewView">
        <table class="previewTable">
          <thead>
            <tr>
              <td v-for="(title,titleIndex) in previewExcel.header" :key="titleIndex">{{title}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(trItem,trIndex) in previewExcel.body" :key="trIndex">
              <td v-for="(tdItem,tdIndex) in trItem" :key="tdIndex">{{tdItem}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadFile()">上 传</el-button>
        <el-button @click="excelShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import XLSX from "xlsx"; // npm导入库，命令：npm i xlsx@^0.14.1 -s
export default {
  name: "terminalManege",
  data() {
    //自定义正则验证
    let checkIp = (rule, value, callback) => {
      let regExp = /(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/;
      if (regExp.test(value) === false) {
        callback(new Error("请输入正确的IP地址"));
      } else {
        callback();
      }
    };
    let checkMac = (rule, value, callback) => {
      let regExp = /((([a-f0-9]{2}:){5})|(([a-f0-9]{2}-){5}))[a-f0-9]{2}/gi;
      if (regExp.test(value) === false) {
        callback(new Error("请输入正确的MAC地址"));
      } else {
        callback();
      }
    };
    return {
      excelShow: false,
      activeTab: "allView",
      tableSize: 0,
      tableLimit: 10,
      currentPage: 1,
      selectedRow: [],
      searchItem: {
        deviceId: "",
        name: "",
        deviceType: "",
        status: ""
      },
      typeArr: {
        title: "设备类型",
        options: []
      },
      statusArr: {
        title: "设备状态",
        options: [
          { value: "", name: "全部" },
          { value: 0, name: "未激活" },
          { value: 1, name: "正常" }
        ]
      },
      tableData: [],
      dialogTitle: "新增",
      dialogFormVisible: false,
      ifDialogEdit: false,
      ifDialogDetail: false,
      ifAddContainer: false,
      currentRow: {},
      dialogForm: {
        deviceId: "",
        name: "",
        deviceType: "",
        status: "",
        ip: "",
        mac: "",
        ActiveTime: "",
        description: "",
        containerArr: [],
        terminalTime: ""
      },
      dialogRules: {
        deviceId: [
          { required: true, message: "请输入终端ID", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入终端名称", trigger: "blur" }],
        deviceType: [
          { required: true, message: "请选择终端类型", trigger: "blur" }
        ],
        ip: [{ validator: checkIp, trigger: "blur" }],
        mac: [{ validator: checkMac, trigger: "blur" }]
      },
      addSelectTitle: "已选容器",
      addTitle: "容器库",
      addDialogTypes: [],
      selectedType: "",
      currentSelectedContainer: "",
      appList: [],
      fileList: [
        { id: 0, fileName: "软件名1", count: 50, time: "2019年8月20日" },
        { id: 1, fileName: "软件名2", count: 50, time: "2019年8月20日" },
        { id: 2, fileName: "软件名3", count: 50, time: "2019年8月20日" },
        { id: 3, fileName: "软件名4", count: 50, time: "2019年8月20日" },
        { id: 4, fileName: "软件名5", count: 50, time: "2019年8月20日" },
        { id: 5, fileName: "软件名6", count: 50, time: "2019年8月20日" },
        { id: 6, fileName: "软件名7", count: 50, time: "2019年8月20日" }
      ],
      fileSelectedList: [],
      searchFileItem: "",
      fileCurrentPage: 1,
      filePageSize: 10,
      fileTotal: 0,
      fileParam: {
        current: 1,
        size: 5,
        sort: "id",
        dir: "asc"
      },
      //////
      previewExcel: {},
      homeStatus: "",
      multipleSelection: [], // 当前页选中的数据
      idKey: "name",
      installedApp: []
    };
  },
  mounted() {
    this.getDeviceType();
    if (this.$route.query.status !== undefined)
      this.searchItem.status = this.$route.query.status;
    this.search(1);
    ///////////////////
  },
  methods: {
    //获取设备类型
    getDeviceType() {
      this.$axios
        .post(baseUrl + "/admin/terminal-type/selTerminalTypeList")
        .then(res => {
          this.typeArr.options = res.data.data;
          this.typeArr.options.push({ deviceType: "", name: "全部" });
        })
        .catch(err => {
          console.log(err);
        });
    },
    //终端列表
    search(page) {
      let param = {
        deviceId: this.searchItem.deviceId,
        name: this.searchItem.name,
        deviceType: this.searchItem.deviceType
      };
      if (this.searchItem.status !== "")
        param.status = parseInt(this.searchItem.status);
      this.$axios
        .post(
          baseUrl +
            "/admin/terminal/devices/info?pageSize=" +
            this.tableLimit +
            "&pageIndex=" +
            page,
          param
        )
        .then(res => {
          this.currentPage = page;
          this.tableSize = res.data.data.totalRecord;
          this.tableData = res.data.data.data;
          return false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    //关闭dialog还原属性
    initProps() {
      this.ifDialogEdit = false;
      this.ifDialogDetail = false;
      this.ifAddContainer = false;
    },
    //监听"x"操作
    handleDialogClose() {
      if (this.ifAddContainer) {
        //安装容器的返回事件
        this.ifAddContainer = false;
        this.dialogTitle = "编辑终端";
        return false;
      } else {
        this.dialogFormVisible = false;
      }
    },
    //详情dialog
    detailRow(row) {
      this.ifDialogDetail = true;
      this.dialogTitle = "终端详细信息";
      this.dialogForm = Object.assign({}, row);
      this.dialogForm.terminalTime = "";
      this.currentRow = Object.assign({}, row);
      this.dialogForm.containerArr = [];
      this.getContainerDetail(row);
      // this.$nextTick(() => {
      //   this.$refs["dialogForm"].resetFields();
      // });
      // this.dialogFormVisible = true;
    },
    //新增dialog
    add(formName) {
      this.dialogTitle = "新增终端";
      this.dialogForm = {};
      this.dialogFormVisible = true;
      // this.$nextTick(() => {
      //   this.$refs[formName].resetFields();
      // });
    },
    //编辑dialog
    editRow(row) {
      this.ifDialogEdit = true;
      this.dialogTitle = "编辑终端";
      this.dialogForm = Object.assign({}, row);
      this.currentRow = Object.assign({}, row);
      this.dialogForm.containerArr = [];
      this.getContainerDetail(row);
    },
    //删除
    delRow(row) {
      this.$confirm("是否确定删除     '" + row.name + "'    该终端?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          arr.push(row);
          this.$axios
            .delete(baseUrl + "/admin/terminal/devices", {
              params: { devices: row.deviceId }
            })
            .then(res => {
              if (res.data.errcode === "0") {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.search(1);
              } else {
                this.$message({
                  message: res.data.errmsg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //获取终端对应容器
    getContainerDetail(row) {
      //获取容器&APP
      this.$axios
        .post(
          baseUrl +
            "/admin/containers/devicedeploystatus?deviceId=" +
            row.deviceId
        )
        .then(res => {
          this.dialogForm.containerArr = [];
          if (res.data.data !== null && res.data.data.length > 0) {
            //找寻已安装的app并放置数据
            this.$axios
              .post(
                baseUrl + "/admin/app/findInstalledApp?deviceId=" + row.deviceId
              )
              .then(apps => {
                let appArr = apps.data.data;
                res.data.data.forEach(item => {
                  let container = {
                    containerName: item.containerConfig.containerName,
                    name: item.containerInfo.name,
                    status: item.containerDeployStatus.deployStatus,
                    appList: []
                  };
                  if (appArr !== null && appArr.length > 0) {
                    appArr.forEach((app, index) => {
                      if (
                        app.containerName === item.containerConfig.containerName
                      ) {
                        container.appList = Object.assign([], app.appList);
                      }
                    });
                  }
                  this.dialogForm.containerArr.push(container);
                });
                console.info(this.dialogForm.containerArr);
                this.$forceUpdate(); //v-for页面重新渲染
              });
          }
          if (this.ifAddContainer) this.ifAddContainer = false;
          this.dialogFormVisible = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //重启
    restart(row) {
      this.$confirm("是否确定重启终端——'" + row.name + "'?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(baseUrl + "/admin/terminal/restart?deviceId=" + row.deviceId)
            .then(res => {
              if (res.data.errcode === "0") {
                this.$message({
                  message: "命令发送成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.errmsg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    //进入维护状态
    maintenance(row) {
      this.$confirm("是否确定进入维护状态——'" + row.name + "'?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(
              baseUrl +
                "/admin/terminal/operation?deviceId=" +
                row.deviceId +
                "&status=1"
            )
            .then(res => {
              if (res.data.errcode === "0") {
                this.$message({
                  message: "命令发送成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.errmsg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    //升级
    updateRow() {
      this.$confirm("是否确定升级——'" + row.name + "'?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //this.currentRow
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消升级"
          });
        });
    },
    //获取终端时间
    getTerminalTime(row) {
      this.$axios
        .put(baseUrl + "/admin/terminal/devices/clock/" + row.deviceId)
        .then(res => {
          if (res.data.errcode === "0") {
            this.dialogForm.terminalTime = this.dateFormate(res.data.data.deviceCurrentTime);
            this.$forceUpdate();
          } else {
            this.$message({
              message: res.data.errmsg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //对时
    pairRow(row) {
      this.$confirm("是否确定对时——'" + row.name + "'?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .put(baseUrl + "/admin/terminal/devices/clocksyn/" + row.deviceId)
            .then(res => {
              if (res.data.errcode === "0") {
                this.$message({
                  message: "命令发送成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.errmsg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消对时"
          });
        });
    },
    //提交新增/编辑
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //新增
          if (this.dialogTitle.indexOf("新增") > -1) {
            let config = {
              headers: {
                "Content-Type": "application/json"
              }
            };
            let arr = [];
            arr.push(this.dialogForm);
            this.$axios
              .post(baseUrl + "/admin/terminal/devices", arr, config)
              .then(res => {
                if (res.data.errcode === "0") {
                  this.dialogFormVisible = false;
                  this.$message({
                    message: "添加成功",
                    type: "success"
                  });
                  this.$refs[formName].resetFields();
                  this.search(1);
                } else {
                  this.$message({
                    message: res.data.errmsg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            //编辑
            var editData = this.$qs.stringify(this.dialogForm);
            this.$axios
              .put(
                baseUrl +
                  "/admin/terminal/devices/" +
                  this.dialogForm.deviceId +
                  "?" +
                  editData
              )
              .then(res => {
                if (res.data.errcode === "0") {
                  this.dialogFormVisible = false;
                  this.$message({
                    message: "修改成功",
                    type: "success"
                  });
                  this.$refs[formName].resetFields();
                  this.search(1);
                } else {
                  this.$message({
                    message: res.data.errmsg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //终端列表分页
    handleSizeChange(val) {
      this.tableLimit = val;
      this.search(1);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    //添加容器/应用dialog
    chooseFile(type, containerName) {
      if (type === "app") {
        this.dialogTitle = "安装应用";
        this.addSelectTitle = "已选应用";
        this.addTitle = "应用库";
        this.currentSelectedContainer = containerName;
        this.getApplications(1);
      } else {
        this.dialogTitle = "安装容器";
        this.addSelectTitle = "已选容器";
        this.addTitle = "容器库";
        this.getContainer(1);
      }
      this.searchFileItem = "";
      this.getAddDialogType();
      this.fileSelectedList = [];
      this.multipleSelection = [];
      this.ifAddContainer = true;
    },
    //获取容器/应用分类
    getAddDialogType() {
      let url = "";
      if (this.addTitle.indexOf("容器") > -1) url = "/admin/containers/types";
      else url = "/admin/app/getAllTypes";
      this.$axios
        .post(baseUrl + url)
        .then(res => {
          if (res.data.errcode === "0") {
            this.addDialogTypes = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取容器列表
    getContainer(page) {
      let condition = {};
      condition.name = this.searchFileItem;
      if (this.selectedType !== "") condition.type = this.selectedType;
      this.$axios
        .post(
          baseUrl + "/admin/containers/files",
          {
            condition: condition,
            pageSize: this.filePageSize,
            pageIndex: page,
            sort: ["desc"]
          },
          { headers: { "Content-Type": "application/json" } }
        )
        .then(res => {
          setTimeout(() => {
            this.setSelectRow();
          }, 200);
          this.fileTotal = res.data.totalRecord;
          if (res.data.data.length > 0) {
            res.data.data.forEach(item => {
              Object.keys(item.containerFiles[0]).forEach(key => {
                item[key] = item.containerFiles[0][key];
              });
            });
          }
          this.fileList = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取应用列表
    getApplications(page) {
      let appInfo = {};
      if (this.searchFileItem !== "") appInfo.name = this.searchFileItem;
      if (this.selectedType !== "") appInfo.type = this.selectedType;
      this.$axios
        .post(
          baseUrl +
            "/admin/app/files?" +
            "pageIndex=" +
            page +
            "&pageSize=" +
            this.filePageSize,
          appInfo
        )
        .then(res => {
          setTimeout(() => {
            this.setSelectRow();
          }, 200);
          this.fileTotal = res.data.data.total;
          this.fileList = res.data.data.records;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //添加容器/应用 分类点击
    typeSelect(index, indexPath) {
      this.selectedType = index;
      if (this.addTitle.indexOf("容器") != -1) this.getContainer(1);
      else this.getApplications(1);
    },
    //安装容器/应用
    submitFile() {
      if (this.fileSelectedList.length > 0) {
        let url = "",
          param = {},
          paramList = [];
        if (this.addTitle === "应用库") {
          url = baseUrl + "/admin/app/deploy?isUpdate=false";
          this.fileSelectedList.forEach(item => {
            let m = {
              containerName: this.currentSelectedContainer,
              deviceId: this.currentRow.deviceId,
              name: item.appName,
              operateType: 0,
              type: item.appType,
              vendor: item.vendor,
              version: item.version
            };
            paramList.push(m);
          });
          param = paramList;
        } else if (this.addTitle === "容器库") {
          url = baseUrl + "/admin/containers/deploy";
          this.fileSelectedList.forEach(item => {
            let m = {
              containerInfo: {
                incrementPkg: item.containerFiles.incrementPkg,
                name: item.name,
                releaseTime: item.containerFiles.releaseTime,
                releaseUser: item.containerFiles.releaseUser,
                type: item.type,
                vendor: item.vendor,
                version: item.containerFiles.version
              },
              containerconfig: {
                containerName: item.name,
                cpuCores: 0,
                description: item.containerFiles.description,
                diskSizeMB: 0,
                memoryMB: 0,
                openServices: "",
                physicalInterfaces: "",
                volumeSizeMB: 0
              },
              deviceId: this.currentRow.deviceId
            };
            paramList.push(m);
          });
          param = { containerlist: paramList, update: false };
        }
        this.$axios
          .post(url, param, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            if (res.data.errcode === "0") {
              this.$message({
                message: "命令发送成功",
                type: "success"
              });
              this.getContainerDetail(this.currentRow);
            } else {
              this.$message({
                message: "安装失败  " + res.data.errmsg,
                type: "error"
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请选择进行安装",
          type: "warning"
        });
      }
    },
    //卸载容器
    uninstallContainer(item) {
      if (item.status !== 1) {
        this.$message({
          message: "该容器处于不可卸载状态，请重新选择",
          type: "warning"
        });
      } else {
        this.$confirm(
          "是否卸载卸载容器——'" + item.containerName + "'?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            let containers = [
              {
                containerNames: [item.containerName],
                deviceId: this.currentRow.deviceId
              }
            ];
            this.$axios
              .post(baseUrl + "/admin/containers/uninstall", containers)
              .then(res => {
                if (res.data.errcode === "0") {
                  this.getContainerDetail(this.currentRow);
                  this.$message({
                    message: "已提交卸载信息，等待卸载",
                    type: "success"
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消卸载"
            });
          });
      }
    },
    //卸载应用
    uninstallApp(container, app) {
      if (app.installStatus !== 1) {
        this.$message({
          message: "该应用处于不可卸载状态，请重新选择",
          type: "warning"
        });
      } else {
        this.$confirm("是否卸载应用——'" + app.appName + "'?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let param = [
              {
                appNames: [app.appName],
                containerName: container.name,
                deviceId: this.currentRow.deviceId
              }
            ];
            this.$axios
              .post(baseUrl + "/admin/app/uninstall", param)
              .then(res => {
                if (res.data.errcode === "0") {
                  this.getContainerDetail(this.currentRow);
                  this.$message({
                    message: "已提交卸载信息，等待卸载",
                    type: "success"
                  });
                } else {
                  this.$message({
                    message: res.data.errmsg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消卸载"
            });
          });
      }
    },
    //容器、应用操作//////////////////////////////////////
    // 设置选中的方法
    setSelectRow() {
      this.multipleSelection = [];
      // 标识当前行的唯一键的名称
      if (this.addTitle.indexOf("容器") > -1) this.idKey = "name";
      else this.idKey = "appId";
      if (!this.fileSelectedList || this.fileSelectedList.length <= 0) {
        return;
      }
      let idKey = this.idKey;
      let selectAllIds = [];
      let that = this;
      this.fileSelectedList.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      this.$refs.fileTable.clearSelection();
      for (var i = 0; i < this.fileList.length; i++) {
        if (selectAllIds.indexOf(this.fileList[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="fileTable"
          this.$refs.fileTable.toggleRowSelection(this.fileList[i], true);
          this.multipleSelection.push(this.fileList[i]);
        }
      }
    },
    // 记忆选择核心方法
    changePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      if (this.addTitle.indexOf("容器") > -1) this.idKey = "name";
      else this.idKey = "appId";
      let idKey = this.idKey;
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.fileSelectedList.length <= 0) {
        this.fileSelectedList = Object.assign([], this.multipleSelection);
        return;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.fileSelectedList.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      let selectIds = [];
      // 获取当前页选中的id
      this.multipleSelection.forEach(row => {
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.fileSelectedList.push(row);
        }
      });
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.fileList.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.fileSelectedList.length; i++) {
            if (that.fileSelectedList[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.fileSelectedList.splice(i, 1);
              break;
            }
          }
        }
      });
      console.info(this.fileSelectedList);
    },
    //当页选择设备操作
    rowChange(rows, row) {
      this.multipleSelection = Object.assign([], rows);
      let selected = rows.length && rows.indexOf(row) !== -1;
      if (this.fileSelectedList.length === 0)
        this.fileSelectedList = Object.assign([], rows);
      else {
        if (selected) {
          //新增选中
          this.fileSelectedList.push(row);
        } else {
          //取消选中
          this.fileSelectedList.forEach((item, index) => {
            if (item[this.idKey] === row[this.idKey]) {
              this.fileSelectedList.splice(index, 1);
              return false;
            }
          });
        }
      }
    },
    handleSelectionChange(val) {
      // table组件选中事件,记得加上@selection-change="handleSelectionChange"
      this.multipleSelection = val;
    },
    //全选
    selecteAll(rows) {
      if (rows.length > 0) {
        //当前页全选
        if (this.fileSelectedList.length === 0)
          this.fileSelectedList = Object.assign([], rows);
        else {
          rows.forEach((row, rowIndex) => {
            if (this.fileSelectedList.indexOf(row) < 0)
              this.fileSelectedList.push(row);
          });
        }
        this.multipleSelection = Object.assign([], rows);
      } else {
        //当前页全部取消
        this.multipleSelection.forEach((item, index) => {
          this.fileSelectedList.forEach((m, i) => {
            if (item[this.idKey] === m[this.idKey])
              this.fileSelectedList.splice(i, 1);
          });
        });
        this.multipleSelection = [];
      }
    },
    //移除已选设备
    removeSelected(val) {
      let delParam = {};
      this.fileSelectedList.forEach((item, index) => {
        if (item[this.idKey] === val[this.idKey]) {
          this.fileSelectedList.splice(index, 1);
          delParam = Object.assign({}, item);
        }
      });
      this.multipleSelection.forEach((item, index) => {
        if (delParam[this.idKey] === item[this.idKey]) {
          this.$refs.fileTable.toggleRowSelection(item, false);
          this.multipleSelection.splice(index, 1);
        }
      });
    },
    // 得到选中的所有数据
    getAllSelectionData() {
      // 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据
      this.changePageCoreRecordData();
      console.log(this.fileSelectedList);
    },
    //添加容器/应用查询
    searchFile(page) {
      if (this.addTitle.indexOf("容器") != -1) this.getContainer(page);
      else this.getApplications(page);
    },
    //容器/应用列表分页
    fileSizeChange(val) {
      this.changePageCoreRecordData();
      this.filePageSize = val;
      this.searchFile(1);
    },
    fileCurrentChange(val) {
      this.changePageCoreRecordData();
      this.searchFile(val);
    },
    ////////////////////////////////////////////////
    ///上传操作//////////////////////////////////////////////////
    //批量上传预览
    importExcel(file) {
      // let file = file.files[0] // 使用传统的input方法需要加上这一步
      const types = file.name.split(".")[1];
      const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
        item => item === types
      );
      if (!fileType) {
        this.$message({
          message: "格式错误,请重新选择表格文件",
          type: "error"
        });
        return;
      }
      this.file2Xce(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          this.xlsxJson = tabJson;
          this.previewExcel.header = Object.keys(tabJson[0].sheet[0]);
          this.previewExcel.body = tabJson[0].sheet;
          this.excelShow = true;
          console.log("数据", this.xlsxJson);
          // xlsxJson就是解析出来的json数据,数据格式如下
          // [
          //   {
          //     sheetName: sheet1
          //     sheet: sheetData
          //   }
          // ]
        }
      });
    },
    file2Xce(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
        // reader.readAsBinaryString(file) // 传统input方法
      });
    },
    //批量上传
    uploadFile() {
      const loading = this.$loading({
        lock: true,
        text: "正在上传",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let paramArr = [];
      this.previewExcel.body.forEach(item => {
        paramArr.push(item);
      });
      let config = {
        headers: {
          "Content-Type": "application/json"
        }
      };
      console.info(paramArr);
      this.$axios
        .post(baseUrl + "/admin/terminal/devices", paramArr, config)
        .then(res => {
          if (res.data.errcode === "0") {
            loading.close();
            this.dialogFormVisible = false;
            this.excelShow = false;
            this.search(1);
            this.$message({
              message: "上传成功",
              type: "success"
            });
          } else {
            loading.close();
            this.$message({
              message: res.data.errmsg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    ///////////////////////////////////
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    dateFormate(date) {
      var date = new Date(date * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //预览(暂停使用)
    selectExcel(convertedData) {
      this.previewExcel = convertedData;
      this.excelShow = true;
      console.info(convertedData);
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "color: #353B40;font-weight: bold;background: #f5fafa;padding: 5px 0;";
      }
    }
  }
};
</script>

<style scoped>
.terminalTable {
  /* max-height: 500px; */
  overflow: auto;
}
.terminalTable .el-button--text {
  color: #11a7b8;
}
.acForm .el-col {
  border-color: rgb(151, 195, 221);
  font-size: 14px;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  line-height: 20px;
  margin-top: -1px;
  margin-right: -1px;
}
.acForm .el-form-item {
  margin-bottom: -1px;
}
.list {
  max-height: 100px;
  overflow: auto;
}
.list div {
  width: 150px;
  margin: 0px 10px;
  float: left;
}
.list button {
  margin-left: 10px;
}
.acForm .el-col {
  text-align: center;
}
.addConfig {
  width: 250px;
  float: left;
}
.addConfig button {
  margin: 5% 0px;
}
.previewView {
  max-height: 300px;
  overflow: auto;
}
.previewTable {
  color: #48576a;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.previewTable td {
  border: 1px solid #8492a6;
  padding: 5px 0;
  word-wrap: break-word;
}
.previewTable > thead {
  background-color: #eff2f7;
}
/* 容器&应用 */
.rongqibox {
  width: 250px;
  height: 240px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
  background: rgb(248, 248, 248);
  border-width: 1px;
  border-style: dotted;
  border-color: rgb(221, 221, 221);
  border-image: initial;
  border-radius: 5px;
  padding: 10px 0px;
  display: inline-table;
  margin: 0px 5px;
  text-align: left;
}
.rq-title {
  height: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 8px;
}
.rq-title i {
  color: #ffffff;
}
.rq-title span {
  display: inline-block;
  width: 24px;
  text-align: center;
  font-size: 16px;
  margin-right: 8px;
}
.layui-bg-blue {
  background-color: #1e9fff !important;
}
.rongqibox ul {
  margin-bottom: 10px;
  padding: 0px 36px;
  list-style: none;
  max-height: 100px;
  overflow: auto;
}
.rongqibox ul li {
  font-size: 14px;
  line-height: 1.8em;
  color: rgb(102, 102, 102);
}
.rongqibox hr {
  margin-bottom: 0px;
}
hr {
  background-color: #e6e6e6;
  height: 1px;
  margin: 10px 0;
  border: 0;
  clear: both;
}
.layui-bg-orange {
  background-color: #ffb800 !important;
}
.el-menu-item {
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 15px;
  line-height: 24px;
  background: #f2fcff;
  margin-bottom: 15px;
  border: 1px solid #aed1ff;
  cursor: pointer;
  color: #0099fa;
}
.el-menu-item i{
  color: #0099fa;
}
.el-menu-item.is-active{
  background: #0099fa;
  color: #ffffff;
}
.el-menu-item.is-active i{
  color: #ffffff;
}
</style>

